/**
 * 初始化多图上传控件
 * @param {Object} containerId 容器id
 * @param {Object} fileInputName 文件选择框的name
 * @param {Object} hiddenNames 隐藏input name
 */
function initMultiImgUpload(url,containerId, fileInputName,hiddenName,imgUrls) {

	/**
	 * 判断是否是图片文件
	 */
	window.isImgFile = function isImgFile(value) {
		var exp = /(.*).(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga|JPG|BMP|GIF|ICO|PCX|JPEG|TIF|PNG|RAW|TGA)$/;
		var re = new RegExp(exp);
		return re.test(value);
	}

	/**
	 * 删除图片
	 * @param {Object} ele
	 */
	window.del = function del(ele) {
		var containers = $(".img-container");
		var container = ele.parentNode;
		//$("#imgContainer1").remove()
		container.remove();
//		if($(nextContainer).html() == null || $(nextContainer).html() == "") {
//			$(nextContainer).html('<img src="/multipart-img-upload/img/add.png" class="upload-img"/>' +
//					'<input type="file" name="' + fileInputName + '[]" onchange="chooseImg(this)">' +
//					'<a class="rotate-btn" onclick="rotate(this)">' +
//			'<i class="fa  fa-rotate-right"></i><a><a class="del-btn" onclick="del(this)"><i class="fa  fa-trash-o"></i><a>');
//		}
		//添加上传按钮
		var addImg = $(".addImg");
		if(addImg.length == 0){
			var contentHtml = '<div class="img-container addImg" id="img-container1" >'+
			'<img src="/multipart-img-upload/img/add.png" class="upload-img"/>' +
			'<img src="/multipart-img-upload/img/loading.gif" class="loading-img"/>' +
			'<input type="file" name="' + fileInputName + '" onchange="chooseImg(this)">' +
			'<input class="hidden-name" type="hidden" name="' + hiddenName + '[]">' +
			'<a class="rotate-btn" onclick="rotate(this)">' +
			'<i class="fa fa-rotate-right"></i><a><a class="del-btn" onclick="del(this)"><i class="fa fa-trash-o"></i><a>'+
			'</div>';
			$("#imgContainer1").append(contentHtml);
		}
		
			
		var countArr = [];
		$(containers).each(function(i,v){
 			if($(v).find(".upload-img").length>0){
 				countArr.push(i);
 			}else{
 				return;
 			}
 			return countArr;
 		});
 		if(countArr.length > 3){
 			$("#imgContainer1").css("height","330px")
 		}else{
 			$("#imgContainer1").css("height","170px")
 		}
	}

	/**
	 * 旋转图片
	 * @param {Object} ele
	 */
	window.rotate = function rotate(ele) {
		var container = ele.parentNode;
		var img = $(container).find("img");
		img.rotate();
	}

	/**
	 * 获取内嵌内容
	 * @param {Object} fileInputName 文件选择框的name
	 * @param {Object} hiddenNames 隐藏input name
	 */
	function getContent(fileInputName,hiddenName,imgUrls) {
		if(imgUrls == null || imgUrls == "" || imgUrls.length == 0){
			return "\
			<div class='img-container addImg' id='img-container1'>\
					<img src='/multipart-img-upload/img/add.png' class='upload-img'/>\
					<img src='/multipart-img-upload/img/loading.gif' class='loading-img'/>\
					<input type='file' name='" + fileInputName + "' onchange='chooseImg(this)'>\
					<input class='hidden-name' type='hidden' name='" + hiddenName + "[]'>\
					<a class='rotate-btn' onclick='rotate(this)'><i class='fa fa-rotate-right'></i></a>\
					<a class='del-btn' onclick='del(this)'><i class='fa  fa-trash-o'></i><a>\
			</div>";
		}else{
			var imgArray = imgUrls.split(",");
			var contentHtml = "";
			for(var i=0;i<imgArray.length;i++){
				contentHtml += "<div class='img-container' id='img-container" + (i+1) + "' >";
				contentHtml += "<img src='" +  imgArray[i]  + "' class='upload-img'/>";
				contentHtml += "<img src='/multipart-img-upload/img/loading.gif' class='loading-img'/>";
				contentHtml += "<input class='hidden-name' type='hidden' name='" + hiddenName + "[]' value='" + imgArray[i] + "'>";
				contentHtml += "<a class='rotate-btn' onclick='rotate(this)'><i class='fa fa-rotate-right'></i></a>";
				contentHtml += "<a class='del-btn' onclick='del(this)'><i class='fa  fa-trash-o'></i></a>";
				contentHtml += "</div>";
				
			}
			if(imgArray.length <5){
				contentHtml += '<div class="img-container addImg" id="img-container1" >'+
				'<img src="/multipart-img-upload/img/add.png" class="upload-img"/>' +
				'<img src="/multipart-img-upload/img/loading.gif" class="loading-img"/>' +
				'<input type="file" name="' + fileInputName + '" onchange="chooseImg(this)">' +
				'<input class="hidden-name" type="hidden" name="' + hiddenName + '[]">' +
				'<a class="rotate-btn" onclick="rotate(this)">' +
				'<i class="fa  fa-rotate-right"></i><a><a class="del-btn" onclick="del(this)"><i class="fa  fa-trash-o"></i><a>'+
				'</div>';
			}
			if(imgArray.length >= 3){
	 			$("#imgContainer1").css("height","330px");
	 		}else{
	 			$("#imgContainer1").css("height","170px");
	 		}
			/*if(imgArray.length < 5){
				for(var j=imgArray.length;j<5;j++){
					contentHtml += "<div class='img-container' id='img-container" + (j+1) + "' index='" + j + "'>";
					contentHtml += "</div>";
				}
				
			}*/
			return contentHtml;
		}
	}

	/**
	 * 选择图片回调
	 * @param {Object} ele
	 */
	window.chooseImg = function chooseImg(ele) {
		
		var containers = $(".img-container");
		//检测是否是图片文件
		if((ele.value !== null && ele.value != "") && !isImgFile(ele.value)) {
			layer.msg("请选择图片文件", {
				icon: 2
			});
			return;
		}
		//图片容器
		var container = ele.parentNode;
		$(container).find(".loading-img").css("display", "none");
		
		//下一个图片容器
//		var nextContainer = containers[parseInt(contanierIndex) + 1];
//		$(nextContainer).css("display", "block");
//		if($(nextContainer).html() == null || $(nextContainer).html() == "") {
//			$(nextContainer).html('<img src="/multipart-img-upload/img/add.png" class="upload-img"/>' +
//				'<img src="/multipart-img-upload/img/loading.gif" class="loading-img"/>' +
//				'<input type="file" name="' + fileInputName + '" onchange="chooseImg(this)">' +
//				'<input class="hidden-name" type="hidden" name="' + hiddenName + '[]">' +
//				'<a class="rotate-btn" onclick="rotate(this)">' +
//				'<i class="fa  fa-rotate-right"></i><a><a class="del-btn" onclick="del(this)"><i class="fa  fa-trash-o"></i><a>');
//		}
		
		//异步提交文件
		//显示上传提示
		$(container).find(".loading-img").css("display", "block");
	 	var formData = new FormData();
	 	formData.append($(ele).attr("name"),ele.files[0]);
	 	$.ajax({
			url: url,
			type: 'POST',
			cache: false,
			data: formData,
			processData: false,
			contentType: false,
			success: function(obj){
				//关闭上传提示
				$(container).find(".loading-img").css("display", "none");
				if(obj.success){
//					$(container).find(".upload-img").attr("src",obj.data.imgUrl);
//					$(container).append($("<input type='hidden' name='oldImgs[]' value='" + $(container).find(".hidden-name").val() + "'>"));
//					$(container).find(".hidden-name").val(obj.data.imgUrl);
					var addImg = $(".addImg");
					var contentHtml = "<div class='img-container' id='img-container1' >\
					<img src='"+obj.data.imgUrl+"' class='upload-img'/>\
					<img src='/multipart-img-upload/img/loading.gif' class='loading-img'/>\
					<input class='hidden-name' type='hidden' name='" + hiddenName + "[]' value='"+obj.data.imgUrl+"'/>\
					<a class='rotate-btn' onclick='rotate(this)'><i class='fa fa-rotate-right'></i></a>\
					<a class='del-btn' onclick='del(this)'><i class='fa  fa-trash-o'></i><a>\
					</div>";
					addImg.before(contentHtml);
					if($(".img-container:not('.addImg')").length == 5){
						addImg.remove();
					}else{
						//检测是否存在上传图片控件，如果没有则添加
						if(addImg.length == 0){
							var contentHtml = '<div class="img-container addImg" id="img-container1" >'+
							'<img src="/multipart-img-upload/img/add.png" class="upload-img"/>' +
							'<img src="/multipart-img-upload/img/loading.gif" class="loading-img"/>' +
							'<input class="hidden-name" type="hidden" name="' + hiddenName + '[]" />' +
							'<a class="rotate-btn" onclick="rotate(this)">' +
							'<i class="fa  fa-rotate-right"></i><a><a class="del-btn" onclick="del(this)"><i class="fa  fa-trash-o"></i><a>'+
							'</div>';
							$("#imgContainer1").append(contentHtml);
						}
					}
					if($(".img-container:not('.addImg')").length >= 3){
			 			$("#imgContainer1").css("height","330px")
			 		}else{
			 			$("#imgContainer1").css("height","170px")
			 		}
				}else{
					error(obj.msg,{icon:5});
				}
			}
		});

	}

	//填充内容
	$("#" + containerId).html(getContent(fileInputName,hiddenName,imgUrls));

}
